<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" style="height: 40px;"
    v-if="!$route.fullPath.includes('admin')">
    <div class="container">
      <!-- <router-link class="navbar-brand" :to="{ name: 'index' }">二手校园淘</router-link> -->
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item navbar-item">
            <router-link :class="router.name == 'index' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'index' }">天气</router-link>
          </li>
          <li class="nav-item navbar-item">
            <router-link :class="router.name == 'map' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'map' }">地图</router-link>
          </li>
          <li class="nav-item navbar-item">
            <router-link :class="router.name == 'disscuss' ? 'nav-link active' : 'nav-link'"
              :to="{ name: 'disscuss' }">讨论区</router-link>
          </li>
        </ul>
      </div>
      <!-- 登录/注册 -->
      <div class="navbar-nav" v-if="!$store.state.user.isLoggedIn">
        <router-link class="btn" :to="{ name: 'login' }">登录</router-link>
        <router-link class="btn" :to="{ name: 'register' }">注册</router-link>
      </div>
      <!-- 个人信息 -->
      <el-dropdown v-if="$store.state.user.isLoggedIn">
        <router-link class="btn" :to="{ name: 'index' }">
           {{ $store.state.user.userInfo?.nickName }}
        </router-link>
        <template #dropdown>
          <el-dropdown-menu class="downMenu">
            <el-dropdown-item class="downitem" @click="logout">
              <div style="width: 100%;">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </nav>
  <div style="background-color: #ccc;height: 1px;width: 100%;"></div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
import { useStore } from "vuex";
const store = useStore();
let logout = () => {
  store.dispatch("logout");
  router.push({ name: 'login' })
};
</script>

<style scoped>
.navbar-item {
  margin: 0 20px;
}

.downMenu {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.downitem {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 30px;
}

.serch-box {
  margin: 0 20px 0 20px;
  font-size: 14px;
}

.red-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  /* font-size: 11px; */
  border-radius: 50%;
  background-color: red;
}

.search-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 32px;
  font-size: 14px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 100%;
}

.message-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 0 10px;
}
</style>